<script setup lang="ts">
const router = useRouter()
const route = useRoute()

const searchVal = ref(useRouteParam<string>('keyword').value || '')

function handleSearch() {
  searchVal.value && router.push(`/search/${encodeURIComponent(searchVal.value)}`)
}

watch(
  () => route.path,
  (val) => {
    if (!val.includes('search')) {
      searchVal.value = ''
    }
  }
)
</script>

<template>
  <BaseInput v-model="searchVal" @keydown.enter="handleSearch">
    <template #append>
      <BaseIcon name="search" size="1.5" @click="handleSearch" />
    </template>
  </BaseInput>
</template>
